import React from 'react';
import './styles.less';
import { useContext } from '../../context';
import showDicesSelector from '../dices-selector';

export default function OrangeBoard(props: any) {
  const { store } = useContext();
  const orangeDice = store.dices.rockPool.find(d => d.type === 'orange');
  const whiteDice = store.dices.rockPool.find(d => d.type === 'white');
  return (
    <div className="orangeboard">
      {store.orangeData.map((i, ind) => {
        const orangeUseable = orangeDice;
        const whiteUseable = whiteDice;
        const pre = store.orangeData[ind - 1] || [0, '1'];
        const useable = !i[1] && pre[1] && (orangeUseable || whiteUseable);
        return (
          <div
            className={`orangeboard-item ${useable ? 'dice-useable' : ''}`}
            style={{
              gridColumn: `${(ind + 1) * 2 + 1} / ${(ind + 1) * 2 + 3}`,
              gridRow: `4 / 21`,
            }}
            onClick={async () => {
              if (useable) {
                var dice: any = orangeDice || whiteDice;
                if (orangeUseable && whiteUseable) {
                  dice = await showDicesSelector([orangeDice, whiteDice]);
                }
                dice &&
                  store.reverseChange(['orangeData', ind, 1], dice, dice.value);
              }
            }}
          >
            {i[1]}
          </div>
        );
      })}
    </div>
  );
}
